<template>
	<view class="content">
		<view class="bg-img" style="width: 100%;height: 700rpx;background-color: #4B734B;"></view>
		<!-- <image src="/static/logo.png" mode="widthFix" style="width: 100%;"></image> -->
		<view class="form">
			<uni-forms class="applyform" ref="form">
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput v-model="applyTeacherQuery.realname" placeholder="请输入姓名" @input="getname" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput v-model="applyTeacherQuery.mobile" placeholder="请输入手机号" @input="getphone" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" name="cardID">
					<uni-easyinput v-model="applyTeacherQuery.real_id" placeholder="请输入身份证号" @input="getcardid" />
				</uni-forms-item>
				<uni-forms-item label="简介" name="about">
					<textarea @input="strtips" @blur="editstr" class="about_area" v-model="applyTeacherQuery.introduce"
						placeholder="请输入自我介绍" placeholder-class="about_area_place" />
					<text class="areatips">{{inputstr}}/140</text>
				</uni-forms-item>
				<uni-forms-item>
					<button class="applybtn" type="default" @click="applysubmit">提交申请</button>
				</uni-forms-item>
				<uni-forms-item>
					<view style="display: flex;align-items: center;">
						<label>
							<checkbox-group @change="ischeck">
								<checkbox style="transform: scale(0.7);" :value="checkval" :checked="ischecked" />
							</checkbox-group>
						</label>
						<view>
							同意
							<text @tap="toAgreement" style="color: #007AFF;">《立只入驻》</text>
							用户协议
						</view>
					</view>


				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {IDCard} from '@/api/idcard.js'
	export default {
		data() {
			return {
				checkval: '',
				ischecked: false,
				inputstr: '0',

				// 申请成为老师
				applyTeacherQuery: {
					realname: '',
					mobile: '',
					real_id: '',
					introduce: ''
				}
			}
		},
		methods: {
			// 勾选用户协议
			ischeck(e) {
				let val = e.detail.value
				console.log(val)
				if (val.length == 1) {
					this.ischecked = true
				} else {
					this.ischecked = false
				}
			},
			// 检测简介字数
			strtips(e) {
				this.aboutme = e.detail.value
				console.log(e.detail.value)
				let aboutstr = this.aboutme
				if (aboutstr.length >= 140) {
					uni.showModal({
						content: '简介不能超过140字',
						showCancel: false,
					});
					this.aboutme.substr(0, 140)
					this.inputstr = 140
				} else {
					this.inputstr = aboutstr.length
				}
			},
			editstr() {
				this.aboutme = this.aboutme.substr(0, 140)
			},
			// v-model编译小程序报错，改用函数
			getname(e) {
				this.name = e
			},
			getphone(e) {
				this.phone = e
			},
			getcardid(e) {
				this.cardID = e
			},
			// 提交表单
			async applysubmit() {
				if (this.$check.checkRealName(this.applyTeacherQuery.realname, '真实姓名', true)) return
				if (this.$check.checkPhoneNumber(this.applyTeacherQuery.mobile, '手机号', true)) return
				if (!IDCard(this.applyTeacherQuery.real_id)) {
					return uni.$toast('身份证号格式不正确')
				}
				// if (this.$check.checkIdCard(this.applyTeacherQuery.real_id, '身份证号', true)) return
				if (this.$check.checkNull(this.applyTeacherQuery.introduce, '自我介绍', true)) return
				if (this.applyTeacherQuery.introduce.length > 140) {
					return uni.$toast('自我介绍字数不能超过140')
				}
				if (!this.ischecked) {
					return uni.$toast('请同意用户协议')
				}
				const res = await this.$http.request('/api/v1/author/apply', this.applyTeacherQuery)
				console.log(res)
				if (res.code == 200) {
					uni.$toast('申请成功, 等待审核', true)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
					return
				}
				uni.$toast(res.message)
			},
			toAgreement() {
				console.warn(123)
				uni.navigateTo({
					url: './agreement'
				})
			}
		}
	}
</script>

<style>
	* {
		box-sizing: border-box;
	}

	.bg-img {
		/* background: url(''); */
	}

	.content {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.form {
		position: fixed;
		top: 160rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.applyform {
		width: 90%;
		padding: 80rpx 60rpx;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0 20rpx 30rpx 0 #ddd;
		box-sizing: border-box;
	}

	.about_area {
		border: 1rpx solid #e5e5e5;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 4rpx;
		position: relative;
	}

	.about_area_place {
		color: #808080;
		font-size: 28rpx;
	}

	.applybtn {
		background-color: #B91C27 !important;
		border-radius: 60rpx;
		margin-top: 60rpx;
		color: #fff !important;
	}

	.areatips {
		color: #808080;
		position: absolute;
		right: 20rpx;
		bottom: 60rpx;
	}
</style>
